<!-- 标记周界线 -->

<template>
  <div v-show="!hide" :class="lineClass">
    <svg>
      <line
        v-if="obj.step === 2 && obj.site.x2 !== null && obj.site.y2 !== null"
        v-bind="lineProps"
        :stroke="color"
        :stroke-width="wideWidth"
      />

      <rect v-else v-bind="rectProps" />
    </svg>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewLine from '@admin/views/Secure/mixMap/MapView/ViewLine'

// ============================== 导出组件 ============================== //

export default CORE.extend(ViewLine, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MarkLine',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ViewLine.computed,

    /**
     * 颜色
     */
    color() {
      return CORE.DICT.STATUS_MAP_DEVICE[0][2]
    },

    /**
     * 正方形属性
     */
    rectProps() {
      const { obj: { site: { x1, y1 } }, wideWidth, color } = this
      const transform = `translate(-${wideWidth / 2}px, -${wideWidth / 2}px)`
      return {
        x: x1,
        y: y1,
        width: wideWidth,
        height: wideWidth,
        style: { fill: color, transform },
      }
    },
  },
})
</script>
